<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->

    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/lang/zh-cn/zh-cn.js"> </script>
    <style type="text/css">
  .layui-upload-img{
    /*width: 100px;*/
  }
  </style>
</head>
<body style="padding:15px;">
<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">标题</label>
    <div class="layui-input-block">
      <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" value="{$vo.title}">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">作者</label>
    <div class="layui-input-block">
      <input type="text" name="auther" lay-verify="title" autocomplete="off" placeholder="请输入作者" class="layui-input" value="{$vo.auther}">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">类型</label>
    <div class="layui-input-block">
      <input type="radio" name="type" value="0" title="文章" <if condition="$vo['type'] eq 0">checked</if>>
      <input type="radio" name="type" value="1" title="广告" <if condition="$vo['type'] eq 1">checked</if>>
    </div>
  </div>


    <div class="layui-form-item">
        <label class="layui-form-label">所属分类</label>
        <div class="layui-input-block">
            <select id="shop_id" name="cate_id" style="height: 100%">
                <option value="" <if condition="$vo['cate_id'] == ''">selected</if>>请选择分类</option>
                <foreach name="news_cate" item="list">
                   <option value="{$list.id}" <if condition="$vo['cate_id'] == $list['id'] && $vo['cate_id'] != ''">selected</if>>{$list.name}</option>
                </foreach>
            </select>
        </div>
    </div>

  <div class="layui-form-item">
    <label class="layui-form-label">缩略图</label>
    <div class="layui-input-block">
      <div class="layui-upload">
        <button type="button" class="layui-btn layui-btn-danger" id="test1"><i class="layui-icon"></i>上传图片</button>
        <div class="layui-upload-list">
          <div id="view"></div>
          <p id="demoText"></p>
        </div>
      </div>
      <input type="hidden" id="pics" name="pics" value="{$vo.pics}">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">视频链接</label>
    <div class="layui-input-block">
      <input type="text" name="video_url" lay-verify="title" autocomplete="off" placeholder="请输入视频链接" class="layui-input" value="{$vo.video_url}">
    </div>
  </div>
  <input type="hidden" name="goodsid" id="goodsid" value="{$vo.goodsid}"/>
  <div class="layui-form-item">
    <label class="layui-form-label">广告商品</label>
    <div class="layui-input-block">
      <i class="layui-icon" style="position: relative;top: 32px;right: -82%;">&#xe615;</i>
      <input type="text" name="goods" lay-verify="title" autocomplete="off" id="goods" placeholder="商品名称进行搜索" class="layui-input" style="width:80%;" value="{$vo.gtitle}">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">广告位置</label>
    <div class="layui-input-block">
      <input type="radio" name="position" value="1" title="上" <if condition="$vo['position'] eq 1">checked</if>>
      <input type="radio" name="position" value="2" title="下" <if condition="$vo['position'] eq 2">checked</if>>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">资讯内容</label>
    <div style="width: 100%;">
        <textarea  id="editor" type="text/plain" style="width:800px;height:400px; position: relative; left: 12%;">
            {:htmlspecialchars_decode($vo['content'])}
        </textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit="" lay-filter="*">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<div id="search-item" style="position:fixed;width: 62%;background-color: #eee;z-index:50;top: 50%;left: 20.3%;">

</div>

<script id="pic" type="text/html">
    {{#  layui.each(d.pics, function(index, item){ }}
      <img class="layui-upload-img delpicsitemn{{index}}" src="{{ item }}" style="margin-left: 10px;width: 100px; height: 100px;">
      <div onclick="delPicsItem({{index}})" class="delpicsitem delpicsitemn{{index}}" data-idx="{{index}}" style="display: inline-block;text-align: center; color: white;background-color: #ca4242;width: 50px;height: 20px;border: 0;">删除</div>
    {{#  }); }}
</script>
<script src="__PUBLIC__/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
var ue = UE.getEditor('editor',{
  toolbars: [
    ['fullscreen', 'source', '|', 'undo', 'redo', '|',
      'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
      'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
      'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
      'directionalityltr', 'directionalityrtl', 'indent', '|',
      'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
      'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
      'simpleupload', 'insertimage', 'emotion', 'scrawl','attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
      'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
      'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
      'print', 'preview', 'searchreplace', 'drafts', 'help']
  ],
});
var pics = [{$vo.pics_arr}];

var layuiThat;
layui.use(['form','upload', 'layedit', 'laytpl'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,$ = layui.jquery
  ,upload = layui.upload
  ,layedit = layui.layedit
  ,laytpl = layui.laytpl;

  var getTpl = pic.innerHTML
  ,view = document.getElementById('view');
  $('#goods').blur(function(e){
    var keyword = $(this).val();
    var box =$('#search-item');
    $.ajax({
      type:"GET",
      url:"{:U('search')}?keyword="+keyword,
      dataType:"json",
      contentType: "application/x-www-form-urlencoded; charset=utf-8",
      success:function(res){
        $.each(res,function(k,v){
          console.log(v.title);
          var l =" <div style='padding: 3% 3%;border-bottom: 1px solid #eee'>&nbsp;&nbsp;&nbsp;" +
                  '<image src="'+ v.img_url+'" style="width:50px;height:50px;"></image>'    +
                  '<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+ v.title+'</span>'+
                  '<button class="layui-btn" style="float: right;margin:7px 10px 0 0;" onclick="sthis('+ v.id+ ',\'' + v.title +'\')">选择</button>'+
                  '</div>';
          $('#search-item').append(l)
        })
      }
    })
  })
  layuiThat = $;
  layedit.set({
    uploadImage: {
      url: '{:U("Home/Public/upload1")}'
    }
  });
  var contIdx = layedit.build("content", {
    tool: ["strong","italic","underline","del","|","left","center","right","|","face","image"]
  });

  var uploadInst = upload.render({
    elem: '#test1'
    ,url: '{:U("Home/Public/upload")}'
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo1').attr('src', result).show(); //图片链接（base64）
      });
    }
    ,done: function(res){
      //如果上传失败
      if(res.err_code > 0){
        return layer.msg('上传失败');
      }else{

        pics.push("https://www.58zltc.com/Uploads/"+res.file_name);
        laytpl(getTpl).render({pics:pics}, function(html){
          view.innerHTML = html;
        });
        $("#pics").val(pics.join(','));
      }
      //上传成功
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
  });

  //监听提交
  form.on('submit(*)', function(data){
    var picsVal = $('#pics').val();
    var post_data = data.field;
//    post_data.content = layedit.getContent(contIdx);
      post_data.content = getContent();
    if (picsVal != '') {
      $.post('#', post_data, function(e) {
        layer.alert(e.info,function(index){
          if(e.status == 1){
            parent.location.reload();
          }else{
            layer.close(index);
          }
        });
      });
    } else {
      layer.alert('缩略图不能为空!')
    }
    return false;
  });
  laytpl(getTpl).render({pics:pics}, function(html){
    view.innerHTML = html;
  });
function getContent() {
    var arr = [];
    arr.push(UE.getEditor('editor').getContent());
    return arr.join("\n");
}

//  $('.delpicsitem').click(function () {
//    var indexn = $(this).data('idx');
//    $('.delpicsitemn' + indexn).remove();
//    pics.splice(indexn, 1);
//    $("#pics").val(pics.join(','));
//  })

});

//删除图片
function delPicsItem (index) {
  layuiThat('.delpicsitemn' + index).remove();
  pics.splice(index, 1);
  console.log(pics.join(','));
  layuiThat("#pics").val(pics.join(','));
}

</script>
<script>
  function sthis(id,title){
    document.getElementById('search-item').style.display="none";
    var goodsid = document.getElementById('goodsid')
    goodsid.value=id;
    document.getElementById('goods').value= title;
  }
</script>
</body>
</html>